<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
            margin: auto;
            padding: 0%;
            font-size: 15px;
            list-style: none;
        }

        /* 时间：2020-12-10这里是定义了一个事件吗？ */

        a:hover {
            color: red;
        }

        /*事件：2020-12-10还可以这样定义标签的一些属性*/
        li {
            float: left;
            width: 6.25%;
            text-align: center;
        }

        li a {
            font-size: 12px;
            color: white;
            text-align: center;
            text-decoration: none;
        }

        li a:hover {
            color: yellow;

        }

        /* 时间2020-12-7，如果不把样式提出了作为外样式，hover这个动作检测就会被阻塞掉 */
    </style>
    <title>购物商城</title>
</head>

<body>

    <div>
        <!-- 头页面的第一部分 -->
        <div style=" height: 45px;background-color: #444444;"></div>
        <div style="background-color:#333333;text-align: center;line-height: 45px;">
            <span style="color: #AEAEAE;">官方网站：</span>&nbsp;&nbsp;&nbsp;
            <a href="http://bing.ioliu.cn" style="color: #AEAEAE;">http://bing.ioliu.cn</a>&nbsp;&nbsp;&nbsp;
            <a href="" style="color: #AEAEAE;">[登录]</a> &nbsp;&nbsp;&nbsp;
            <a href="" style="color: #AEAEAE;">[免费注册]</a>&nbsp;&nbsp;&nbsp;
            <a href="" style="color: #AEAEAE;">[我的购物车]</a>&nbsp;&nbsp;&nbsp;
            <a href="" style="color: #AEAEAE;">[我的订单]</a>&nbsp;&nbsp;&nbsp;
            <a href="" style="color: #AEAEAE;">[设为首页]</a>&nbsp;&nbsp;&nbsp;
            <a href="" style="color: #AEAEAE;">[加入收藏]</a>&nbsp;&nbsp;&nbsp;
        </div>
        <!-- 头页面的第二部分 -->
        <div style="width: 1000px; position: relative; background-color: rgb(255 , 255, 255); height: 120px;">
            <img src="D:\Desktop\web开发\01.项目图片\images\article\logo.gif" alt="购物商城">
            <img src="D:\Desktop\web开发\01.项目图片\images\banner.gif" style="margin-top: 10px;" alt="购物柜">

            <div style="position: absolute;right: 50px;top: 20px;">
                <div style="height: 20px;width: 70px; line-height: 20px; text-align: center; border:1px solid #cccccc;">
                    <a href="" style="text-decoration :none;">认识我们</a>
                </div>
                <div
                    style="height: 20px;width: 70px; line-height: 20px; text-align: center; margin-top: 10px; border: 1px solid #cccccc;">
                    <a href="" style="text-decoration: none;">联系我们</a>
                </div>
            </div>
        </div>

        <!-- 头页面的第三部分 -->
        <div style="background-color:red; height: 50px;">
            <div style="width: 1000px;height: 50px;">
                <ul style="line-height: 50px;">
                    <li> <a href="">首页</a> </li>
                    <li> <a href="">护肤</a> </li>
                    <li> <a href="">彩妆</a> </li>
                    <li> <a href="">香气</a> </li>
                    <li> <a href="">身体护理</a> </li>
                    <li> <a href="">礼盒套装</a> </li>
                    <li> <a href="">母婴专区</a> </li>
                    <li> <a href="">男士专区</a> </li>
                    <li> <a href="">粉底</a> </li>
                    <li> <a href="">粉饼</a> </li>
                    <li> <a href="">睫毛膏</a> </li>
                    <li> <a href="">唇彩</a> </li>
                    <li> <a href="">腮红</a> </li>
                    <li> <a href="">食品保健</a> </li>
                    <li> <a href="">瘦身类</a> </li>
                    <li> <a href="">美容类</a> </li>
                </ul>
            </div>

        </div>
    </div>
</body>

</html>